<template>
  <div class="addset">
    <el-dialog :title="getPanleName" :visible="showDialog" @close="cancel">
      <el-form ref="myform" :model="form" :rules="rules">
        <el-form-item label="角色名称" label-width="100px" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="角色描述" label-width="100px">
          <el-input v-model="form.description" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { changeRole, addRole } from '@/api/setting'
export default {
  props: ['showDialog', 'currentItem', 'getPanleName'],
  data() {
    return {
      form: {
        name: '',
        description: ''
      },
      rules: {
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    console.log(this.currentItem)
  },
  methods: {
    cancel() {
      this.$emit('closeDialog', false)
      this.form = {
        name: '',
        description: ''
      }
      this.$refs.myform.resetFields()
    },
    determine() {
      // 全局校验成功
      this.$refs.myform.validate(async isOK => {
        if (isOK) {
          try {
            if (this.currentItem.id) {
              // 修改角色接口
              const res = await changeRole(this.form)
              console.log(res)
            } else {
            // 新增角色接口
              const res1 = await addRole(this.form)
              console.log(res1)
            }
            // 关闭面板
            this.$emit('closeDialog', false)
            this.$message.success('操作成功')
            // 清空面板
            this.form = {
              name: '',
              description: ''
            }
            // 更新数据
            this.$emit('update')
          } catch {
            console.log('出错了')
          }
        }
      })
    }
  }
}
</script>

<style>

</style>
